<template>
	<view class="gy-dropdown-menu" id="gy-dropdown-menu" :style="{top: props.top + 'px'}">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
	
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from "vue";
	 const emits = defineEmits(["menuHeightFn"]);
	const props = defineProps({
		top: {
			type: Number,
			default: 0
		}
	});

	const { proxy } : any = getCurrentInstance();

	const initTop = ref(0);
	const dropdownMenuTop = ref("0px");

	function setActionSheetTop() {
		let children : any = [];
		// #ifdef MP-WEIXIN
		children = proxy.$children;
		// #endif
		for (let i = 0; i < children.length; i++) {
			children[i].setActionSheetTop(dropdownMenuTop.value);
		}
	}

	function initFn() {
		// #ifdef H5
		uni.createSelectorQuery().select("#gy-dropdown-menu").boundingClientRect((res: any)=>{
			initTop.value = res.top;
			dropdownMenuTop.value = initTop.value + res.height + "px";
			setActionSheetTop();
		}).exec();
		// #endif
		// #ifdef MP-WEIXIN
		proxy.createSelectorQuery().select("#gy-dropdown-menu").boundingClientRect((res: any)=>{
			initTop.value = res.top;
			dropdownMenuTop.value = initTop.value + res.height + "px";
			emits('menuHeightFn', res.height)
			setActionSheetTop();
		}).exec();
		// #endif
	}
	
	onMounted(() => {
		initFn();
	})

	defineExpose({
		initFn: initFn,
		closeFn: () => {
			let children = [];
			// #ifdef MP-WEIXIN
			children = proxy.$children;
			// #endif
			for (let i = 0; i < children.length; i++) {
				if(children[i].name && children[i].name === "gy-dropdown-menu-item"){
					children[i].hideActionSheetFn();
				}
			}
		}
	});
</script>

<style lang="scss" scoped>
	.gy-dropdown-menu {
		display: flex;
		width: 100%;
		@include sticky(0);

		:deep(gy-dropdown-menu-item) {
			width: 100%;
		}
	}
</style>